<template>
<el-drawer :title="formDrawer.title" :visible.sync="formDrawer.visible" direction="rtl" custom-class="drawer-right-side" :before-close="closeDrawer">
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-position="left" label-width="100px" class="ruleForm">
        <el-form-item label="品牌" prop="brand_id">
            <picker-view v-model="ruleForm.brand_id" type="company" placeholder="请选择品牌"></picker-view>
        </el-form-item>

        <el-form-item label="渠道来源" prop="source_id">
            <source-picker-view ref="sourcePickerRef" type="source" v-model="ruleForm.source_id" placeholder="请选择渠道"></source-picker-view>
        </el-form-item>

        <el-form-item label="客户姓名" prop="fullname">
            <el-input v-model="ruleForm.fullname" placeholder="请输入客户姓名"></el-input>
        </el-form-item>

        <el-form-item label="性别">
            <el-radio-group v-model="ruleForm.sex">
                <el-radio v-for="item in sexOpts" :key="item.id" :label="item.id">{{
            item.title
          }}</el-radio>
            </el-radio-group>
        </el-form-item>

        <el-form-item label="联系方式" prop="contacts">
            <el-button type="primary" @click="showAppendContact">添加联系方式</el-button>
            <div>
                <el-link type="info" disabled>可添加多个联系方式</el-link>
            </div>
        </el-form-item>

        <div class="contacts" v-if="ruleForm.contacts.length > 0">
            <contact-list-view :contacts="ruleForm.contacts"></contact-list-view>
        </div>

        <el-form-item label="咨询门店" :prop="'product.store_id'">
            <picker-view v-model="ruleForm.product.store_id" type="store" placeholder="请选择门店" ></picker-view>
        </el-form-item>

        <el-form-item label="预算">
            <el-input v-model="ruleForm.product.budget" placeholder="请输预算"></el-input>
        </el-form-item>

        <el-form-item label="预产期">
            <el-date-picker v-model="ruleForm.product.event_month" type="date" format="yyyy 年 MM 月" value-format="yyyy-MM">
            </el-date-picker>

        </el-form-item>
        <el-form-item label="进店时间">
            <el-date-picker class="w100" type="datetime" v-model="ruleForm.product.entry_time" placeholder="请选择进店时间" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
        </el-form-item>

        <el-form-item label="备注" :prop="'product.remark'" :rules="[{required: true,message: '请填写备注'}]">
            <el-input type="textarea" v-model="ruleForm.product.remark" maxlength="500" show-word-limit placeholder="备注"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="submit">提交</el-button>
        </el-form-item>
    </el-form>

    <append-contact-view ref="appendContactView" :contacts="ruleForm.contacts"></append-contact-view>
</el-drawer>
</template>

<script>
import {
    createMemberApi
} from "@/api/customer/member.js";
import {
    sexList
} from "@/config/reflection.js";
import sourcePickerView from "@/components/picker/source.vue";
import pickerView from '@/components/picker/select.vue'
import appendContactView from "./components/contact-append.vue";
import contactListView from "./components/contact-list.vue";
import monthPicker from "@/components/monthPicker/monthPicker.vue";
const ruleForm = {
    brand_id: "",
    source_id: "",
    fullname: "",
    sex: 2,
    contacts: [],
    product: {
        store_id: "",
        budget: "",
        event_date: "",
        remark: "",
        entry_time:"",
        event_month:""
    },
    assign_type: 2
};

export default {
    components: {
        pickerView,
        sourcePickerView,
        appendContactView,
        contactListView,
        monthPicker
    },
    data() {
        return {
            formDrawer: {
                title: "添加客资",
                visible: false,
            },
            sexOpts: sexList,
            ruleForm: JSON.parse(JSON.stringify(ruleForm)),
            rules: {
                brand_id: [{
                    required: true,
                    message: "请选择品牌",
                }],
                source_id: [{
                    required: true,
                    message: "请选择渠道",
                }],
                contacts: [{
                    required: true,
                    message: "请添加联系方式",
                }],
            },
        };
    },
    methods: {
        showDrawer() {
            this.ruleForm = JSON.parse(JSON.stringify(ruleForm)),
                this.formDrawer.visible = true;
            this.$nextTick(() => {
                this.$refs["sourcePickerRef"].clearCascader();
            });
        },
        closeDrawer() {
            this.formDrawer.visible = false;
        },
        handleMonthChange(event){
            this.ruleForm.product.event_month = event
        },
        changeCategory(e) {
            if (this.ruleForm.product.category_id <= 0) {
                return false;
            }

            this.ruleForm.product.category = e;
        },
        submit() {
            let _this = this;
            this.$refs["ruleForm"].validate((valid) => {
                if (!valid) {
                    return false;
                }
                let data = Object.assign({}, _this.ruleForm);

                // 添加客资
                createMemberApi(data).then((res) => {
                    if (res.code == "200") {
                        _this.$message.success(res.msg);
                        _this.formDrawer.visible = false;
                        _this.$emit("getTableData", {});
                    } else {
                        _this.$message.warning(res.msg);
                    }
                });
            });
        },

        // 追加联系方式
        showAppendContact() {
            this.$refs["appendContactView"].showDialog();
        },
        // 显示追加的意向产品
        showAppendProduct() {
            this.$refs["appendProductView"].showDialog();
        },
    },
};
</script>

<style>
.contacts {
    margin: 0 0 18px;
}

.line {
    text-align: center;
}
</style>
